<template>
  <div class="index">
    <div class="footer"></div>
    <p>地区分布</p>
    <div class="rightBotEchart"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getAreaData } from "@/api/echarts";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();

const areaInfoRef = ref([]); // 地区数据
const areaNameRef = ref([]); // 地区名称

onMounted(() => {
  getData();
});

/**
 * 请求数据
 */
async function getData() {
  let res = await getAreaData();
  if (res.code == 0) {
    const {
      data: { areaName, areaValue },
    } = res;
    areaNameRef.value = areaName;
    areaInfoRef.value = areaValue.map((item, index) => {
      return {
        value: item,
        name: areaName[index],
      };
    });
    initEcharts();
  } else if (res.msg.includes("登录")) {
    router.replace("/");
  }
}
/**
 * 初始化图表
 */
function initEcharts() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".rightBotEchart"));
  // 自定义颜色
  let colorList = [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
  ];
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      left: "center",
      top: "90%",
      textStyle: {
        color: "rgba(255, 255, 255, 0.5)",
        fontSize: 14, //字体大小
      },
      itemWidth: 14,
      itemHeight: 14,
      data: areaNameRef.value,
    },
    series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [20, 80],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 2,
        },
        label: {
          fontSize: 14,
        },
        // 文字调整
        label: {
          fontSize: 14,
        },
        // 引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8,
        },
        data: areaInfoRef.value.map((item, index) => {
          item.label = {
            color: colorList[index],
          };
          return item;
        }),
        itemStyle: {
          color: (params) => {
            var index = params.dataIndex;
            return colorList[index];
          },
        },
      },
    ],
  });
  // 图表跟随浏览器自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .rightBotEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
